<template>
  <div class="handler" @click="toggleGisSettingPanel">
    <a-icon :type="iconType" />
  </div>
</template>

<script lang="ts">
/**
 * gis 画布工具栏
 */
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class HandlerArrow extends Vue {
  @Prop({
    type: String,
    default: 'left',
  })
  direction!: string

  // 箭头方向
  public get iconType(): string {
    return 'left'
  }

  public toggleGisSettingPanel() {}
}
</script>

<style scoped lang="less">
.handler {
  background: #dee3f7;
  color: #1e49f8;
  cursor: pointer;
  font-size: 9px;
  height: 70px;
  left: -12px;
  line-height: 70px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-100%);
  width: 12px;
  z-index: 101;

  &::before,
  &::after {
    border: 6px solid #dee3f7;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
  }

  &::before {
    border-left-color: transparent;
    border-top-color: transparent;
    top: -12px;
  }

  &::after {
    border-bottom-color: transparent;
    border-left-color: transparent;
    bottom: -12px;
  }
}
</style>
